<template>
  <div class="container">
    <div>试卷属性</div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>试卷名称：</div>
        <div>
          <el-input
            v-model="testPaperName"
            placeholder="请输入试卷名称"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row" v-if="testPaperType == '2'">
        <div class="font"><span style="color: red">*</span>首页展示：</div>
        <div>
          <el-select v-model="isHomeShow" placeholder="是否展示在首页">
            <el-option
              v-for="item in showList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>试卷类型：</div>
        <div>
          <el-select v-model="testPaperType" placeholder="请选择试卷类型">
            <el-option
              v-for="item in testTypeList"
              :key="item.id"
              :label="item.testPaperType"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>考试时长（分钟）：
        </div>
        <div>
          <el-input
            v-model="testPaperTime"
            placeholder="请输入考试时长  例：60"
            clearable
            size="small"
          />
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>试卷总分（分）：
        </div>
        <div>
          <el-input
            v-model="testPaperScore"
            placeholder="请输入试卷总分 例：100"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>及格分数（分）：
        </div>
        <div>
          <el-input
            v-model="passScore"
            placeholder="请输入及格分数 例：60"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font"><span style="color: red"></span>PC答题状态：</div>
        <div>
          <el-select v-model="pcUpDownFlag" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="row">
        <div class="font"><span style="color: red"></span>试卷级别：</div>
        <div>
          <el-select v-model="classType" placeholder="请选择">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="font">排序：</div>
        <div>
          <el-input
            v-model="orderNum"
            placeholder="请输入排序号"
            clearable
            size="small"
          />
        </div>
      </div>
    </div>
    <div>试卷设置</div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>教员试卷：</div>
        <div>
          <el-select v-model="isTeacherTestPaper" placeholder="请选择">
            <el-option
              v-for="item in teacherList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <!-- <div class="row">
        <div class="font">
          <span style="color: red">*</span>组卷形式：
        </div>
        <div>
          <el-select v-model="testPaperMethod" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div> -->
    </div>
    <div v-if="testPaperMethod == '0'">
      <div class="row">
        <div class="font">章节名称：</div>
        <div>
          <el-select v-model="chapter" placeholder="请选择">
            <el-option
              v-for="item in chapterList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
        <div class="font">单选题数：</div>
        <div>
          <el-input
            v-model="singleNum"
            placeholder="请输入单选题数:"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font">多选题数：</div>
        <div>
          <el-input
            v-model="multipleNum"
            placeholder="请输入多选题数:"
            clearable
            size="small"
          />
        </div>
        <div class="font">判断题数：</div>
        <div>
          <el-input
            v-model="trueFalseNum"
            placeholder="请输入判断题数:"
            clearable
            size="small"
          />
        </div>
        <el-button style="margin-left: 20px" @click="add()">添加</el-button>
        <el-button
          type="danger"
          style="margin-left: 20px"
          @click="clear()"
          v-if="isClear"
          >清空表格</el-button
        >
      </div>
      <el-table
        class="listTable"
        :data="chapterInfo"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="序号" prop="id" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="章节名称">
          <template slot-scope="{ row }">
            <span>{{ row.chapter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单选题数" width="160" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.singleNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="多选题数" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.multipleNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="判断题数" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.trueFalseNum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index + 1)"
              v-hasPermi="['financeProduct:product:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button type="primary" @click="submit()">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getTestDetail, testEdit, getTypeList } from "@/api/system/user";
export default {
  components: {},
  data() {
    return {
      classType: null,
      testPaperName: "",
      // courseName: '',
      testPaperType: "",
      testPaperTime: "",
      testPaperScore: "",
      passScore: "",
      testPaperMethod: "",
      isTeacherTestPaper: "",
      typeList: [
        { key: "0", value: "随机" },
        { key: "1", value: "人工" },
      ],
      teacherList: [
        { key: "0", value: "是" },
        { key: "1", value: "非" },
      ],
      levelList: [
        { key: "0", value: "消防设施操作员基础知识" },
        { key: "1", value: "消防设施操作员初级" },
        { key: "4", value: "消防设施操作员中级（监控方向）" },
        { key: "5", value: "消防设施操作员高级（监控方向）" },
        { key: "6", value: "消防设施操作员中级（维保方向）" },
        { key: "7", value: "消防设施操作员高级（维保方向）" },
      ],
      testTypeList: [
        // { key: "4", value: "学前测试" },
        // { key: "5", value: "日常练习" },
        // { key: "1", value: "每日作业" },
        // { key: "2", value: "押题模考" },
        // { key: "3", value: "结业考试" },
      ],
      isHomeShow: "",
      showList: [
        { key: "1", value: "是" },
        { key: "0", value: "否" },
      ],
      chapterList: [],
      chapter: "",
      singleNum: "",
      multipleNum: "",
      trueFalseNum: "",
      isClear: false,
      chapterInfo: [],
      info: "",
      id: "",
      pcUpDownFlag: "",
      statusList: [
        { key: "1", value: "上架" },
        { key: "0", value: "下架" },
      ],
      orderNum: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
  },
  mounted() {
    this.init(this.id);
    this.getTypeList(1);
  },
  methods: {
    getTypeList(page) {
      let params = {
        pageNum: page,
      };
      getTypeList(params).then((res) => {
        if (res.code == 200) {
          this.testTypeList = res.rows;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    init(id) {
      getTestDetail(id).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          this.testPaperName = this.info.testPaperName;
          this.isHomeShow = this.info.isHomeShow;
          // this.courseName = this.info.courseName
          this.testPaperType = Number(this.info.testPaperType);
          this.testPaperTime = this.info.testPaperTime;
          this.testPaperScore = this.info.testPaperScore;
          this.passScore = this.info.passScore;
          this.pcUpDownFlag = this.info.pcUpDownFlag;
          this.classType = this.info.classType;
          this.isTeacherTestPaper = this.info.isTeacherTestPaper;
          this.orderNum = this.info.orderNum;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    submit() {
      let params = {
        id: this.id,
        isHomeShow: this.isHomeShow,
        testPaperName: this.testPaperName,
        // courseName: this.courseName,
        testPaperType: this.testPaperType,
        testPaperTime: this.testPaperTime,
        testPaperScore: this.testPaperScore,
        passScore: this.passScore,
        isTeacherTestPaper: this.isTeacherTestPaper,
        pcUpDownFlag: this.pcUpDownFlag,
        classType: this.classType,
        orderNum: this.orderNum,
      };
      testEdit(params).then((res) => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push("examination");
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    back() {
      this.$router.push("examination");
    },
  },
};
</script>
<style scoped>
.container {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
}
.row {
  display: flex;
  padding-bottom: 20px;
}
.line {
  height: 1px;
  background: #dcdfe6;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 20px;
}
.row .font {
  width: 200px;
  text-align: right;
  margin-right: 20px;
}
.flex_row {
  display: flex;
}
.footer {
  width: 540px;
  text-align: right;
  margin-top: 40px;
}
</style>
